<extend name="Public/base" />

<block name="body">
<style>
.add_record {
    margin-top: 10%;
}
 .add_record div ul li{
    list-style: none;
    margin-top: 35px;
    margin-bottom: 30px;
    margin-left: -50px;
 }
 .add_record div ul li span{
    line-height: 30px;
    width: 60px;
    /*text-align: right;  */
 }
 .add_record div ul li input{
    width: 250px;height: 30px;
    float: right;
    margin-left: 10px;
    border: solid 1px #ccc;
    border-radius: 3px;
    padding-left: 5px;
    line-height: 26px;
 }
 .add_record div ul li select{
    width: 250px;height: 30px;
    float: right;
 }
 .add_record div ul li input:focus { 
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.c_green {
    background-color: #5cb85c !important;
    border-color: #5cb85c !important;
    color: white !important;
}
.table tbody td {
    vertical-align: middle !important;
}
._input {
	
}
._input input {
	
}
.search_name {
	border: solid 1px #ccc;
	padding: 4px 4px 4px 8px; 
	margin-right: 5px; 
	border-radius: 4px;
}
.btn-primary { 
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4; 
}
.btn-primary:hover {
	color: #fff; 
	background-color: #286090; 
	border-color: #204d74;
}
.btn-info { 
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da; 
}
.btn-info:hover {
	color: #fff; 
	background-color: #39b3d7; 
	border-color: #269abc;
}
.btn-warning { 
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236; 
}
.btn-warning:hover {
	color: #fff; 
	background-color: #ec971f; 
	border-color: #d58512;
}
.btn-danger { 
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a; 
}
.btn-danger:hover {
	color: #fff; 
	background-color: #c9302c; 
	border-color: #ac2925;
}
 </style>
<!-- 标题栏 -->
<div class="main-title">
    <h2>分类定价</h2>
</div> 

<div class="panel panel-default">
    <div class="panel-heading">     
        <div class="fl">
            <button id="add_finance" class="btn btn-default c_green">新 增</button> 
            <button id="jq2excel" class="btn btn-info">导 出</button> 
            <div class="" style="float: right;">
                 <form action="{:U('category')}" method="post">
                    <input type="text" name="name" class="search_name" placeholder="搜索名称">
                   <input  type="submit"  class="btn btn-warning  search search" value="查询">
                   <input  type="submit"  class="btn btn-primary search search" value="返回"> 
                </form>
            </div>

        </div>      
    </div><!-- /.panel-heading -->  
    <div class="panel-body topa" > 
        <div class="table-responsive">      
            <table class="table table-striped table-bordered table-hover excel" id="dataTables-user"><!-- 必须设定表格的id == -->
                <thead>
                    <tr>       
                        <th class="">ID</th> 
                        <th class="">名称</th>
                        <th class="">单价</th> 
                        <th class="">创建日期</th> 
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="add-users">
                    <volist name="_category" id="vo">
                        <tr> 
                            <td>{$vo.id}</td> 
                            <td>{$vo.name}</td>  
                            <td>{$vo.unit}</td> 
                            <td>{$vo.create_time}</td> 
                            <td class="txt_c">
                            	<a class="dis_b del_data" data-id="{$vo.id}">
                            		<button class="btn btn-danger ajax-get confirm" url="{:U('delcategory',array('id'=>$vo['id']))}" target-form="ids">删除</button>
                            	</a>
                            </td>
                        </tr>
                    </volist>
                </tbody>
            </table>
        </div><!-- /.table-responsive --> 

        <style>
            .topa{
                position: relative;
            }   
            .newly{
                width: 600px;
                height: 500px;
                position: absolute;
                top: 20%;
                left: 50%;
                margin-left: -300px;  
            }
            .add_record { text-align: center; }
            .add_record > div { display: inline-block; margin-top: 38px; }
            .add_record ul { margin: 0; }
            .add_record ul li {  }
            .add_record ul li span { float: left; }
            .add_record ul li input { float: left; }
        </style>        
        <!-- 用户新增隐藏 -->   
    </div><!-- /.panel-body -->
    <!-- 分页 -->
    <div class="page">
        {$_page}
    </div> 
</div><!-- /.panel -->   
</block> 
<block name="script">
<link rel="stylesheet" href="__STATIC__/datetimepicker/css/datetimepicker.css" />
<script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
<script src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>   
<script type="text/javascript" src="__JS__/jquery.table2excel.min.js"></script>  
<script type="text/javascript">
$(function(){
    //新增按钮
    $("#action_add").click(function(){
        window.location.href = $(this).attr('url');
    });  
    //导出数据
  	var date2time="<?php echo date('Y-m-d');?>";
    $('#jq2excel').click(function(){
      var myDate = new Date();
      $('.excel').table2excel({
          exclude:".right,.nth,.auditorder",
          name: "分类定价"+date2time,
          filename: "分类定价"+ date2time,
          exclude_img: true,
          exclude_links: true,
          exclude_inputs: true
      });
  	})
})
</script>

<script type="text/javascript"> 
$('#goback').on('click',function () {
    $('#addshow').hide();
})
//新增财务记录
var _htm =  
        "<form id='_form' name='myform' method='post' role='form'>"+
        "<div class='add_record'>"+
            "<div>"+
                "<ul>"+    
                    "<li class='c_f data_box'>"+
                        "<span>名称</span>"+
                        "<input type='text' name='li[name]'>"+ 
                    "</li>"+   
                    "<li class='c_f'>"+
                        "<span>单价</span>"+
                        "<input type='text' name='li[unit]'>"+
                    "</li>"+
                    "<li class='c_f'>"+ 
                        "<span></span>"+
                        "<input type='hidden' class='create_time' name='li[create_time]'>"+
                    "</li>"+   
                    "<p>"+
                        "<button class='btn btn-default c_green' id='submit' >确 定</button>"+ 
                    "</p>"+ 
                "</ul>"+
            "</div>"+
        "</div>"+
        "</form>"
$('#add_finance').click(function(){
    //新增记录层
    layer.open({ 
      title: '新增分类定价', 
      type: 1,
      skin: 'layui-layer-rim', //加上边框
      area: ['500px', '500px'], //宽高
      content: _htm
    });
    $('.time').datetimepicker({
        format: 'yyyy-mm-dd',
        language:"zh-CN",       
        minView:2,             
        autoclose:true
    }); 
    $('.data_box span').after( $('.data').html());
});
var boole = true;
$(document).on('click','#submit',function(){
    // 获取当前时间
    var create_time = new Date().getTime();
    $('.create_time').val(create_time); 
    $('.add_record ul li').each(function(){
        var input = $(this).find('input').val();  
        if(input == ''){
            boole = false;
            layer.msg('请填写完整内容!'); 
            return false;
        }else{
            boole = true;
        }
    });   
    if(boole){  
        $.post("{:U('addcategory')}",$('#_form').serialize(),function(data){
            console.log(data);  
            var d=[];
            d[0] = data.name;
            d[1] = data.unit; 
            d[2] = data.create_time;
            d[3] = data.id;
            var url = "/index.php?s=/admin/finance/delcategory/id/";
            var targetHtml = addHtml(d,url);  
            if( $.trim($('#add-users').html()) == '' ){  
            	$('#add-users').append(targetHtml);
            }else{
            	$('#add-users tr:first').before(targetHtml);  
            } 
            $('.add_record ul li input').val('');    
        });  
    } 
    if( $('.odd .dataTables_empty').length != 0 ){ 
        $('.odd .dataTables_empty').parent('.odd').remove(); 
    }   
    return false;
});  
function addHtml(data,url){
    var targetHtml =
    "<tr>"+
        "<td>"+data[3]+"</td>"+
        "<td name='name'>"+data[0]+"</td>"+
        "<td name='unit'>"+data[1]+"</td>"+
        "<td class='create_time' name='create_time'>"+data[2]+"</td>"+
        "<td class='txt_c'>"+
        	"<a class='dis_b del_data'>"+
        		"<button class='btn btn-danger ajax-get confirm' url='"+url+data[3]+'.html'+"' target-form='ids'>删除</button>"+
        	"</a>"+
        "</td>"+
    "</tr>"; 
    
    return targetHtml;
} 
</script>
 
</block>
